博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,并且固定浮动导航...
阅读量:7228 次
发布时间:2019-06-29

本文共 1172 字,大约阅读时间需要 3 分钟。

 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,动态获取。

举个栗子:

这是要循环的div,要菜单$(".mdtit") 在$(".box")距离顶部小于20px时保持浮动。

学校介绍

 

.nav_index_fix {
position: fixed; left: 0; top: 0;}

 

$(function(){        $(window).scroll(function(){            $(".box").each(function(){                //所有需要计算距离浏览器顶端高度的元素                var scrollTop = $(window).scrollTop();// 网页被卷起来的高度                var nap_top = $(this).offset().top;        //页面元素距离文档顶端高度距离                if(nap_top-scrollTop < 20){              //元素距离浏览器顶部高度                    $(".mdtit").removeClass("nav_index_fix");                          $(this).children(".mdtit").addClass("nav_index_fix");                }else{                    $(this).find(".mdtit").removeClass("nav_index_fix");                }            })        });    });

注意:声明的变量必须写在each循环里面,当滑动时才能动态获取当前元素距离顶部的距离

转载于:https://www.cnblogs.com/i6010/articles/6543067.html

你可能感兴趣的文章
三层交换及动态路由,半臂路由
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
SCCM 2016 使用PXE 部署操作系统(五)
查看>>
SCCM 2016 分发.msi 软件
查看>>
Api接口开发实例
查看>>
软考网工难点分析之二 项目进度安排
查看>>
http
查看>>
P3-SQL 学习笔记
查看>>
dokcer安装gitlab
查看>>
SonarQube安装配置
查看>>
css中渐变色作为背景图来使用总结
查看>>
Python运行速度如何?
查看>>
毕业面试 | 如何准确一分钟介绍你自己?
查看>>
shell中的read命令详解
查看>>
shell训练营Day19
查看>>
linux下输入密码不回显
查看>>
mysql数据同步
查看>>
JFrame 和JPanel 的关系-区别(学习笔记)
查看>>
CSS中margin-top属性失效问题解决
查看>>